以前にもBootstrapを使おうと思って調べてことがあったのですが、Moongiftの記事には、欠点として、Bootstrap臭があるとして以下のようなことが書いてありました。

Bootstrapのデザインは我が強く、Bootstrapを使っているなとすぐに感じられてしまいます。これを嫌うデザイナーはとても多いです。個人的にもそれは致し方ないと思っていたのですが、最近【難しく考えすぎ！？】bootstrap臭のしないお洒落なレスポンシブWEBデザインの作り方 | WEBデザイナーの憂鬱という記事を読み、グリッドだけ採用するというのはやはりありなのだと気付かされました。

他のブログを見ても同じようなことを書いていたし、自分の場合はグリッドを使う機会はあまりないので、それじゃ使うのやめとこうかということになっていました。

しかし、最近、jQuery UI を使ったり素材をいろいろなところから取ってきていると、バランスの取れないデザインになってきていたので、もう一度 Bootstrap はどうなのかを調べ直してみました。そうしたら、bootstrap.css を単に使うのではなく、Sass 版の Bootstrap である、bootstrap-sass を使うことでカスタマイズがすごくやりやすくなるのがわかりました。それで、bootstrap-sass の使い方を少しメモしておきます。

Bootstrap 自体が、Less で開発されているのだから、それを機械でコンパイルして作った bootstrap.css を修正しようと思ったら無理があるのは当然ですよね。それから、Bootstrap は Less で開発されているのですが、Sass の方が下の方でも少し触れるのですが、機能が少し多くて少し便利なので、初めて使うのだったら Sass を使った方がいいと思います。

Visual Studio は、2013 update 2 以降でSass に標準対応しており、インストールの手順は、stackoverflowの「How To Use SASS in Visual Studio 2013」を参考にしました。

1. メニューの「ツール」→「機能拡張と更新プログラム」を使って、VS2013 に Web Essentials 2013 をインストールします。Web Essentials 2013 には、Sass のコンパイラも含まれているので、これだけの作業で Sass が使えるようになります。

2. SASS の設定は、メニューの「ツール」→「オプション」でできますが、インストール時の設定が下の図のようになっているので、特に設定をしなくても、.scss ファイルを保存した時に自動的にコンパイルされます。

3. プロジェクトに Bootostrap-sass をインストールするには、NuGet を使うと便利です。

4. Bootostrap-sass をインストールすると下の図のようにファイル構成になります。

4. そこで、_bootstrap.scss をコピーして、例えば、bootstrap-custom.scss という名前を付けて保存します。_bootstrap.scss の内容は、下の図のようなものです。例えば、不要なコンポーネントがあれば、ダブルスラッシュでコメントアウトして保存すれば除外できます。

5. bootstrap-custom.scss を保存すると、自動的にコンパイルされて下の図のように bootstrap-custom.css が作成されます。

Visual Studio で、2013 update 2 が公開されたのが今年(2014年)の5月なので結構最近のことですが、それ以降は本当に簡単に Sass が使えるようになっています。

次に、Web デザイナーがよく使っている Dreamweaver の場合はどうかというと、Adobe の連載記事「SassをDreamweaver＆Edge Codeではじめよう」に説明があります。この記事の第１回は、Sass のいい説明になっていると思います。ただ、Dreamweaver 自体は Sass に対応していないので、Compass を直接使った方がはるかに便利だし、Windows PC の場合だと Visual Studio を使った方がずっと効率的だとは思うのですが、慣れたツールを使いたいという人は多いのでこういう使い方になるのかなと思いました。

Bootstrap のカスタマイズについては、オンラインツールとして本家のCustomize and downloadやライブでカスタマイズができる Bootstrap Live Customizer がありますが、それと同じカスタマイズを、Sass では、bootstrapフォルダーにある_variables.css を編集することで行うことができます。当然のことですが、下の図を見るとオンラインツールと同じ順番に変数が並んでいるのが分かると思います。だから、Sass を使って変数を修正するのに難しいことは全然ありません。

Sass のいいところは、上の図をみたら変数に !default が付いているところです。その場合、直接 _variables.css を編集する必要がなくて、先ほど作成した bootstrap-custom.scss で、bootstrap/variables を読み込む前に、変数を定義しておいてやると、その場合には default が定義されていると定義された変数の方が優先されます。だから、bootstrap-custom.scss を編集するだけでカスタマイズをすることが可能です。例えば文字の色を brand-danger と同じ色のしたいのであれば下の図のように @import “bootstrap/variables” の前に $text-color を定義してやればOKです。

こういうやり方だとカスタマイズした所がよく分かります。また、Bootstrap は、よくバージョンアップをしますが、Bootrap-sass のファイルを全く触らずにカスタマイズしているので、スムーズにバージョンアップをすることができます。

変数のカスタマイズ以上のことをしようとすれば、Sass のことを勉強する必要が出てきますが、基本は CSS ファイルと同じなので慣れるのは早いと思うし、Sass のページには、英語ですがきちんとしたドキュメントもあります。自分も、もう少しカスタマイズをしたいところがあるので Sass のことをもう少し勉強しようと思っています。

最後に、Visual Studio のことについてですが、Web デザインの関係では、自分が使い始めた数年前は本当にひどかったですが、現在では非常に優秀になっています。下の図のように、コードの変更をすぐに Page Inspector を使って見ることができるし、エディターは入力の補完機能が強力だし、カラーピッカーも備えています。自分のようにデザインなんかしたことがない人間でも、こういうWebデザインをする（させられる）時代になってきたので、Microsoft としては今後も力を入れていくと思います。その機能を Visual Studio Community 2013 か Express 2013 for Web であれば無償で利用できるので、WebデザインはAdobeのツールがいいとかいっていないで、どんどん使ってみたらいいと思います。

Web アプリでもネイティブアプリのように iPhone や Android のホーム画面に登録できるし、オフラインで動作させることもできるということなので、実際にやってみて、まとめてみました。

まず、一番最初に準備するのがホーム画面に登録するためのアイコンで、そのサイズは以下のとおりです。

• iPhone (iOS7) 120px × 120px
• iPhone（iPhone 4以降でiOS6まで）114px × 114px
• iPhone（iPhone 3 まで）57px × 57px
• iPad （iOS7）152px × 152px 
• iPad （iOS6までのRetina）144px × 144px
• iPad （iOS6までの普通）72px × 72px
• Android 48dp × 48dp

Android の場合は、Developers の Iconography をみると1x、1.5x、2x、3x、4x の機種があるので、48px, 72px, 96px, 144px, 192px のものになりますが、4x の XXXHDPi の機種は現実にはまだ殆ど存在しないはずで、3x と 2x が主流です。

これだけたくさんの解像度のアイコンを作るのは大変なので、取りあえずは152pxのアイコンを作っておけば、スマートフォン側で自動的に縮小、拡大してくれるので、それで対応することにしました。

作成したアイコンを表示させるためには、iPhone の場合は、それをPNG画像にして apple-touch-icon.png というファイル名でサイトのルートディレクトリに置いておけばいいだけです。apple-touch-icon-precomposed.png という名前で保存してもいいのですが、この場合は iPhone が自動でハイライト/シャドウを付けなくなります。iOS7からはフラットデザインになってiOS6以前のようなハイライト/シャドウはなくなったので、apple-touch-icon-precomposed.png を使う意味はあまりないと思います。

サイズを複数設置する場合は以下のようにアイコンのサイズを指定して設置すると、iPhone側で自動的に適当なサイズのものを選択してくれます。

apple-touch-icon-120x120.png

Android の場合は、ファイルを設置しただけでは認識してくれないので、以下のように link ダグで指定してやります。この指定の方法は、iOSの場合と同じです。

<link rel="apple-touch-icon" href="apple-touch-icon.png">

アイコンのサイズを指定したい場合は、以下のように sizes プロパティで指定することができます。この指定の方法も、iOSの場合と同じです。

<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png">

以上で、スマートフォンのホーム画面にアイコンを貼り付けることができるようになります。スマートフォン側でホーム画面にアイコンを貼り付ける操作をどうするかについては省略します。

Safari のスタンドアローンモード（フルスクリーンモード）について

Safari では、スタンドアローンモード（フルスクリーンモード、Webアプリモード）と呼ばれているモードがあります。このモードに設定して、ホーム画面から起動するとURLバーが無くなってネイティブアプリに近くなります。

設定は、metaタグを使って以下のようにします。

<meta name="apple-mobile-web-app-capable" content="yes" />

また、以下の設定をすると下側にある Safari のステイタスバーの色を自分のアプリの色に合わせて変更することができます。

<meta name="apple-mobile-web-app-status-bar-style" content="black">

しかし、このモードを実際に使ってみて、注意が必要だと思われる点がありました。具体的には以下のとおりです。

1. localStorage が mobile Safari とは別になってしまう。

mobile Safari で設定した内容が使えなくなるので、結構不便だと思いました。

2. 普通のリンクだと mobile Safari が起動してしまう

普通にリンクすると mobile Safari が起動して、mobile Safari の該当のページが表示されます。だから、最早スタンドアローンモードはなくなってしまって、簡単に戻ることもできなくなります。これを防ぐためには、リンクをページ内リンクにするか、JavaScript での移動にします。

下の参考に記載した stackoverflow の Q&A によると下のようなスクリプトを書いてやればいいようです。

var a=document.getElementsByTagName("a");
for(var i=0;i<a.length;i++)
{
  a[i].onclick=function()
  {
    window.location='this.getAttribute("href");
    return false
  }
}

http://d.hatena.ne.jp/izit_kosuke/20110219/1298073430

http://stackoverflow.com/questions/2898740/iphone-safari-web-app-opens-links-in-new-window

3. 処理速度が遅くなる

スタンドアローンモードにすると、どうも起動時間が遅くなるように感じます。stackoverflow の Q&A にもあって、セキュリティの関係で Nitro という高速のJavaScriptエンジンが使えなくなるためのようです。

http://stackoverflow.com/questions/13413984/slow-initial-loadingscreen-ios-web-app

Android の場合にどうなるかを Nexus 5 で試してみました。Nexus 5 の場合は、localStorage は同じものを使います。普通のリンクにしておいてもモードが変わることはありません。その代わり、普通のリンクでは外部リンクであっても全画面表示のままになってしまいます。そして、ホーム画面のアイコンから立ち上げた場合、登録したページが表示されるのではなく、直近に表示されていたページがそのまま表示されます。

スタンドアローンモードを使うと見かけはアプリらしくなるのですが、採用するのがいいのかどうかは結構微妙です。localStorage が mobile Safari とは別になってしまうというのは、利用者にとっては結構戸惑うと思います。自分の場合は、アプリとしての完成度が低いので、当面はスタンドアローンモードを使わないことにしました。

次回は、Web アプリをオフラインで動作させることに挑戦したいと思っています。

徳島県の県土防災情報システムの中で「徳島県道路通行規制情報 Google Maps API 版」として7年間稼働していたものをベースとして、オープンソースとして GitHub で公開するとともに以下のURLでホームページを公開しました。

ホームページ：徳島の交通状況 Google Maps API 版 http://tk.ecitizen.jp/
ソースコード：TKGMap https://github.com/awoni/TKGMap

Google Maps API の関係でテストしておきたいことがあったこと、Google が提供している交通状況と規制情報を併せて表示させると結構便利なことから、問題はないわけではないが、オープンデータを作るのは結構簡単だよということも言いたかったので公開することにしました。

徳島の交通状況のホームページのサーバーは、Amazon S3 を使っている。Amazon S3 はこのようなシステムであれば保管料が1Gあたり0.1$、データ転送量が1Gあたり0.2$なので月10円のレベルで運用でき、それでいて大量のアクセスがあっても問題なく動作する。もちろんその分の転送量は必要になるだけど、一時的に大量のアクセスが予想されるシステムでは非常に便利だ。

最近、オープンデータという言葉が流行していて、公共データの公開が進められているられているが、あまりにSIer主導になっているのではないかと思う。データを公開するシステムを作るより先に、アメリカがしているように国が公開している情報は自由に使えるといってくれた方が遙かに開発しやすくなると思う。政府が提供したいデータと開発者が利用したいデータでは一致しないことも多いが、日本の場合はどこまでなら適法なのか訳がわからないところが多い。

これ以降は、最近あったGoogleマップ禁止令の件で調べたことをメモしておます。Googleマップ禁止令というのは、政府方針と反する外国語名で表記されているものがあるとして、政府が全国の自治体や国立大などに対し、それをホームページで利用しないよう通知していたという件である。名指しはしていないが、実質的には、Googleマップを使うなという通知となっている。

このGoogleマップの禁止令の経緯に関しては、片山さつき議員のブログ「NHK「みちしる」の国境離島誤表記でわかった、Googleマップにおける日本海、竹島、国後島、魚釣島表記問題、、官邸に即上申→世耕副長官より政府関係機関は全てチェック迅速対応」が参考になる。そこでは、以下のように述べている。

グーグル地図の世界版が日本の主張をいれた表記になっていないことは、再三国会でも取り上げ、外務省から抗議をさせていますが、グーグルの日本版region=jpに切り替えれば日本国としての正しい表記にはなる、ということで仕方ないと使ってきたわけですよね。
しかし、今回、国後島だけは、日本版にしても、国後島の上に表記されたキリル文字が消えないので、「これはないでしょう!ということで、グーグル日本本社に、私からも少なくとも日本版は全て日本政府の公式見解にあわせ、国後島、と単独表記するように強く要請したところです。前向きにご検討いだたいております。

この記事が書かれたのは今年の4月11日のことでで、NHK がGoogleの世界版を使っていたので日本海が東海と併記になっていたということで問題になったが、それ以外に、国後島が日本語版でもキリル文字で併記されているという問題があったようだ。その場は、グーグルの世界版を使わず日本版（region=JP)に切り替えるということと、国後島についてはグーグルに要請するということで収まったようだ。しかし、グーグルは、その後も国後島の併記はやめなかったので、とうとう8月に国土地理院が禁止令を出したようだ。なお、現時点では、国後島は日本語版では日本語のみの表記になっているので公的機関が使っても通知には違反しないようになっているようだ。

国土地理院が正確に表示されていると勧めている自分のところの地理院レイヤーも試してみて、以下のアドレスにそのサンプルを設置しているので参考にして欲しい。

http://tk.ecitizen.jp/gsi.html

サンプルを見ればよくわかるが、地図としての優劣は別にして、背景地図として使う場合にはゼンリンが作ったGoogleの地図とはデザイン的に全く勝負になっていないと思う。まあ、国が税金を使って Google マップに負けない背景地図を作るというのもどうかなと思うのでやむを得ないところだろう。

地理院の地図に関していえば、以前から電子国土という独自システムを作っていたが、googleマップに圧倒されて利用者が少なく、今年度末で地理院レイヤーという地図だけになって電子国土のシステムは廃止され OpenLayers というOSSを使用することになっている。OpenLayers対応の地図レイヤーは、上のサンプルようにGoogle Maps APIでも利用できるので、地理院の地図を使うのに一番便利なのが、Google Maps API というのも皮肉だ。

6月から作成していた統計データ API エクスプローラにやっとチャートを入れることができました。まだ、都道府県ランキングの指標の分だけだし、それも改善しようと思っている点が数多くあって、最初の一歩というところです。

D3.js を使ったことで、最初の一歩には時間がかかりましたが、今後インターラクティブな画面を作っていくということでは大きな進歩だと思っています。チャートを描くだけであれば、Google Visualization API を利用した方が簡単です。でも、内部がブラックボックスだけにそのチャートを自分で思ったように動かすことは相当難しくなります。D3.js の場合は、最初は難しいけどプログラムで完全にコントロールができることがメリットです。そうはいっても、まだチャートが一つできただけで、コントロールをするためには学ぶことが多く残っています。

ユーザーにデータをインターラクティブに可視化して提供できるということは、ユーザーエクスペリエンス（UX）を向上させる有力な手段の一つです。これから自分の思い通りに図を動作させることができるように頑張ろうと思っています。

日本は長時間労働大国で残業ありきの国だ。一方で、Gigazine の8月9日の記事「急速に進化し続けるテクノロジーは人間から仕事を奪ってしまうのか」では、マサチューセッツ工科大学スローンマネジメントスクールのErik Brynjolfsson教授および彼の共同執筆者であるAndrew McAfee氏の「How Technology is Destoroying Jobs」という記事を紹介しているが、日本の現状と対比してみると面白い。

近年全世界で問題になりつつある就業率低下の背景に、産業ロボット工学から自動翻訳サービスまで幅広い分野において進歩し続けるコンピューター技術があると主張しています。次々と新しくなるテクノロジーを受け入れる産業は、製造・小売り・事務業だけにとどまらず、金融・法律に関する業種や医療・教育などのサービスにおいても最新技術を積極的に採用しています。

アメリカでは、確かに2000年初頭から生産性は上昇し続けているものの、雇用の方は成長をやめて低下し始めているという状態になっている。ただし、テクノロジーの進化が雇用の低下の原因になっていることについては、否定的な意見も多いようで、機械によって労働者が仕事を失っているという証拠を見つけるのはとても困難だそうだ。

2012年にAmazonに買収されたスタートアップ企業のKiva Systems はロボットの開発をする会社で、そのロボットを使えば通常の工場の4倍の量の注文を処理可能になるそうだ。そのKivaではロボットの販売好調に伴い、人員を増加させているが、そのほとんどがロボットのアルゴリズムを担当するソフトウェア・エンジニアだそうだ。

このような結果、アメリカでは左の図のように2000年から2010年で最も大きく伸びた職業はソフトウェアエンジニアだった。そして、以前の記事で紹介したようにソフトウェアエンジニアは、2010年から2020年にかけても大きく成長する職業だといわれている。

一方、日本では、今でも プロジェクトマネージャー > システムエンジニア > プログラマー という身分制度があって、プログラミングは下賤な作業と思われている。そういうことで、設計もプログラムもするソフトウェアエンジニアという言葉自体が普及していない。そして、さらにはIT技術者は3Kの職業で将来絶滅するとまでいわれている。

結局、アメリカが、コンピュータ技術を取り入れることで生産性をあげたが、そういう欧米の企業に対して日本の企業では長時間労働をさせることによって競争力を維持しようとしているようだ。欧米では失業が問題になり、日本では長時間労働や過労死が問題になっているのは、そういう理由だろう。世界中どこでも労働者には厳しい時代だ。

ただし、特殊合計出生率が、アメリカ2.1、イギリス1.94に対して日本は1.39で、長期的にみると日本は子供を育てられなくなっている社会だからこのまままだと敗戦は確実だ。コンピュータ技術に対して長時間労働という禁じ手の武器で対抗しようとするのは、第2次世界大戦での戦いを思い出させる。